<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <script>
        // 通用防抖：提高复用性 
        // 一、前置防抖 

        // var btns = document.querySelectorAll("button");
        // btns[0].onclick = debounce(function () {
        //     console.log("按钮一")
        // }, 2000);

        // btns[1].onclick = debounce(function () {
        //     console.log("按钮二")
        // },1000);


        // //  定义一个通用函数 实现另外一个函数的防抖 ；
        // function debounce(fn, delay) {
        //     var timer = null;
        //     return function () {
        //         if (!timer) {
        //             fn();
        //         }
        //         clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
        //         timer = setTimeout(function () {
        //             timer = null;
        //         }, delay);
        //     }
        // }



        // function fn1() {
        //     console.log("fn1")
        // }

        // function fn2() {
        //     console.log("fn2")
        //     fn1();
        // }

        // document.onclick = fn2;

        // 二、通用后置防抖 

        var btns = document.querySelectorAll("button");
        btns[0].onclick = debounce(function () {
            console.log("按钮一")
        }, 2000);

        btns[1].onclick = debounce(function () {
            console.log("按钮二")
        }, 1000);


        function debounce(fn, delay) {
            var timer;
            return function () {
                clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
                timer = setTimeout(function () {
                    fn();
                }, delay);
            }
        }
    </script>
</body>

</html>